<template>
  <div class="box">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home/index/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/test' }">试题管理</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/test/testDetali">试题详情</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="describe">
      <el-descriptions class="margin-top" title="试题详情" :column="3" border>
        <!-- <template #extra>
          <el-button type="primary">Operation</el-button>
        </template> -->
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">题干</div>
          </template>
          {{ tname }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">是否主观</div>
          </template>
          是
          <el-switch v-model="IsCheck" class="ml-2" style="
              --el-switch-on-color: #13ce66;
              --el-switch-off-color: #ff4949;
            " disabled />否
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">等级</div>
          </template>
          <el-input-number v-model="num" disabled :min="1" :max="10" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">答案</div>
          </template>
          {{ answer }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">描述</div>
          </template>
          {{ describe }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div class="table">
      <div class="Qoption">
        <strong>试题选项</strong>
      </div>
      <div class="tablehead">
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="ocontent" label="选项内容" />
          <el-table-column label="正确答案">
            <template #default="scope">
              <el-tag :type="scope.row.oisRight === 0 ? 'warning' : 'success'" disable-transitions>{{ scope.row.oisRight
                  === 0 ? "否" : "是"
              }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { TestDateli } from "@/utils/Exam/test/testDateli";
import { Question } from "@/api/Product/exaam";
import router from "@/router";

const question = new Question();
export default defineComponent({
  setup() {
    const data = reactive<TestDateli>({
      qid: "",
      tname: "",
      answer: "",
      describe: "",
      IsCheck: true,
      num: 0,
      tableData: []
    });
    const methods = {
      QuestionDetali() {
        question.UpdateEchoQuestion({
          qid: data.qid
        }).then(res => {
          res.data.forEach((e: any) => {
            data.tname = e.qcontent,
              data.IsCheck = e.qisCheck,
              data.num = e.qlv,
              data.answer = e.answer == null ? "选择题没有参考答案" : e.answer,
              data.describe = e.qexplain == null ? "没有描述" : e.qexplain,
              data.tableData = e.opiton
          });
        })
      }
    };
    onMounted(() => {
      let id = (router.currentRoute.value.params.id).toString();
      data.qid = id;
      setTimeout(() => {
        methods.QuestionDetali();
      }, 100);

    })
    return {
      ...toRefs(data),
      ...methods,
    };
  },
});
</script>
<style scoped>
/* .box {
  background-color: azure;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  width: 100%;
  height: 100%;
  padding-top: 10px;
} */
.crumbs {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

.describe {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}

/* .describe {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
} */
.table {
  width: 94%;
  padding: 20px;
  margin: 15px;
  margin-top: 40px;
  background-color: white;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.Qoption {
  font-size: 17px;
  margin: 10px;
}
</style>
